<template>
  <!-- 数据看板 -->
  <view class="data-board">
    <!-- 新增隔离人员 -->
    <view v-if="boardData && !showEmpty" class="increase">
      <text class="title">新增隔离人员</text>
      <view class="board">
        <view class="chart">
          <qiun-data-charts
            :opts="inRingConfig"
            type="ring"
            :chartData="inChartData"
            :errorShow="false"
            :canvas2d="true"
            background="none"
            :tooltipShow="false"
            :tapLegend="false"
          />
        </view>
        <view class="info">
          <text class="title grey block">总隔离人数</text>
          <text class="title">{{ boardData.total }}</text>
          <text class="title grey block">今日新增人数</text>
          <text class="title">{{ boardData.increaseNo }}</text>
        </view>
      </view>
      <text class="title mb40">新增详情</text>
      <view class="details">
        <view class="progress" v-for="(item, index) in boardData.increaseDetail" :key="index">
          <text class="grey block">{{ item.address }}</text>
          <progress :percent="((item.number * 100) / boardData.increaseNo).toFixed(2)" show-info stroke-width="10" />
        </view>
      </view>
    </view>
    <!-- 新增解除人员 -->
    <view v-if="boardData && !showEmpty" class="decrease">
      <text class="title mt40">新增解除人员</text>
      <view class="board">
        <view class="chart">
          <qiun-data-charts
            :opts="deRingConfig"
            type="ring"
            :chartData="deChartData"
            :errorShow="false"
            :canvas2d="true"
            background="none"
            :tooltipShow="false"
            :tapLegend="false"
          />
        </view>
        <view class="info">
          <text class="title grey block">总隔离人数</text>
          <text class="title">{{ boardData.total }}</text>
          <text class="title grey block">今日解除人数</text>
          <text class="title">{{ boardData.relieveNo }}</text>
        </view>
      </view>
      <view class="list">
        <uni-table emptyText="暂无更多数据">
          <!-- 表头行 -->
          <uni-tr>
            <uni-th width="40" align="left">隔离点</uni-th>
            <uni-th width="50" align="left">今日解除人数</uni-th>
            <uni-th width="50" align="left">剩余隔离人数</uni-th>
          </uni-tr>
          <!-- 表格数据行 -->
          <uni-tr v-for="(item, index) in boardData.details" :key="index">
            <uni-td>{{ item.address }}</uni-td>
            <uni-td>{{ item.relieveNo }}</uni-td>
            <uni-td>{{ item.residueNo }}</uni-td>
          </uni-tr>
        </uni-table>
      </view>
    </view>
    <v-empty :isShow="showEmpty" text="暂无相关记录"></v-empty>
  </view>
</template>
<script>
import RingConfig from '@/components/v-chart/ring.js';
import VEmpty from '@/components/v-empty/index.vue';
import Api from '@/api/main';
export default {
  components: {
    VEmpty
  },
  data() {
    return {
      showEmpty: false,
      boardData: {
        // // 总隔离人数
        // total: 1000,
        // // 今日新增人数
        // increaseNo: 100,
        // // 新增详情
        // increaseDetail: [
        //   {
        //     // 地点
        //     address: '01 温都水城',
        //     // 新增数量
        //     number: 20
        //   },
        //   {
        //     // 地点
        //     address: '02 温都水城',
        //     // 新增数量
        //     number: 10
        //   },
        //   {
        //     // 地点
        //     address: '03 温都水城',
        //     // 新增数量
        //     number: 10
        //   }
        // ],
        // // 今日解除人数
        // relieveNo: 20,
        // // 隔离点数据
        // details: [
        //   {
        //     id: 1,
        //     // 隔离点
        //     address: '隔离地点1隔离地点1隔离地点1',
        //     // 今日解除人数
        //     relieveNo: 50,
        //     // 剩余人数
        //     residueNo: 300
        //   },
        //   {
        //     id: 1,
        //     // 隔离点
        //     address: '隔离地点1',
        //     // 今日解除人数
        //     relieveNo: 50,
        //     // 剩余人数
        //     residueNo: 300
        //   }
        // ]
      }
    };
  },
  computed: {
    // 新增人数占比
    getInPercent() {
      if (!this.boardData.total) {
        return 0
      }
      return `${((this.boardData.increaseNo * 100) / this.boardData.total).toFixed(2)}`;
    },
    getDePercent() {
      if (!this.boardData.total) {
        return 0
      }
      return `${((this.boardData.relieveNo * 100) / this.boardData.total).toFixed(2)}`;
    },
    inRingConfig() {
      return {
        ...RingConfig,
        title: {
          name: '新增占比',
          fontSize: 15,
          color: '#666666',
          offsetX: 0,
          offsetY: 0
        },
        subtitle: {
          name: `${this.getInPercent}%`,
          fontSize: 24,
          color: '#7cb5ec',
          offsetX: 0,
          offsetY: 0
        }
      };
    },
    deRingConfig() {
      return {
        ...RingConfig,
        title: {
          name: '新增占比',
          fontSize: 15,
          color: '#666666',
          offsetX: 0,
          offsetY: 0
        },
        subtitle: {
          name: `${this.getDePercent}%`,
          fontSize: 24,
          color: '#7cb5ec',
          offsetX: 0,
          offsetY: 0
        }
      };
    },
    // 新增数据
    inChartData() {
      return {
        series: [
          {
            data: [
              {
                name: `今日新增`,
                value: this.boardData.increaseNo
              },
              {
                name: '往日增加',
                value: this.boardData.total - this.boardData.increaseNo
              }
            ]
          }
        ]
      };
    },
    // 解除数据
    deChartData() {
      return {
        series: [
          {
            data: [
              {
                name: `今日解除`,
                value: this.boardData.relieveNo
              },
              {
                name: '往日解除',
                value: this.boardData.total - this.boardData.relieveNo
              }
            ]
          }
        ]
      };
    }
  },
  methods: {
    async getData() {
      uni.showLoading({
        title: '加载中...'
      });
      const res = await this.$http.post(Api.getDataBoard);
      this.boardData = res || {};
      this.showEmpty = !res;
      uni.hideLoading();
    }
  },
  created() {
    this.getData();
  }
};
</script>
<style lang="scss">
.data-board {
  width: 100%;
  .title {
    font-size: 36rpx;
  }
  .grey {
    color: $uni-sub-text-color;
  }
  .chart {
    width: 400rpx;
    margin-left: -40rpx;
  }

  .board {
    display: flex;
    align-items: center;
    justify-content: space-around;
  }

  .details,
  .info {
    line-height: 2;
  }

  .mt40 {
    display: block;
    margin-top: 40rpx;
  }
  .mb40 {
    display: block;
    margin-bottom: 40rpx;
  }
}
</style>
